<template>
  <div class="bg-particles">
    <div 
      class="particle" 
      v-for="i in 20" 
      :key="i" 
      :style="getParticleStyle(i)"
    ></div>
  </div>
</template>

<script setup lang="ts">
const getParticleStyle = (_index: number) => {
  const left = Math.floor(Math.random() * 100)
  const top = Math.floor(Math.random() * 100)
  const delay = Math.random() * 8
  const size = Math.floor(Math.random() * 2) + 2
  
  return {
    left: `${left}%`,
    top: `${top}%`,
    width: `${size}px`,
    height: `${size}px`,
    animationDelay: `-${delay}s`
  }
}
</script>

<style scoped>
.bg-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: #00d4ff;
  border-radius: 50%;
  animation: float 8s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}
</style>
